/**
 * Created by zhangjiating on 2017/3/25.
 */
(function($){
    var zlDrag = (function(){
        function zlDragFun(element,options){
            this.settings = $.extend(true,$.fn.zlDrag.default,options||{});
            this.element = element;
            this.drag = this.element.find(this.settings.selectors.drag);
            this.bar = this.element.find(this.settings.selectors.bar);
            this.btn = this.element.find(this.settings.selectors.btn);
            this.start = this.element.find(this.settings.selectors.start);
            this.end = this.element.find(this.settings.selectors.end);
            this.count = this.element.find(this.settings.selectors.count);
            this.min = this.settings.min;
            this.settings.max > 100 ? this.max = 100 : this.max = this.settings.max;
            this._initStyle();
            this.init();
        };
        zlDragFun.prototype = {
            init : function(){
                var that = this,
                    start = that.min,
                    end = that.max;
                that.btn.on("mousedown",function(e){
                    var x = (e || window.event).clientX,
                        l = this.offsetLeft,
                        maxMove = that.drag[0].offsetWidth - this.offsetWidth;
                    $(document).on("mousemove.drag",function(e){
                        var thisX = (e || window.event).clientX,
                            to = Math.min(maxMove,Math.max(0,l+(thisX - x)));
                        that.btn.css("left",to+'px');
                        that._setDragW(Math.round(Math.max(0,to/maxMove)*(end-start)),to);
                        window.getSelection ?  window.getSelection().removeAllRanges() : window.selection.empty();
                    }).on("mouseup",function(){
                        $(document).off('mousemove.drag');
                    });
                });
                that.count.on("input propertychange",function(){
                    that._changeCount(start,end);
                });
                that.drag.on("click",function(e){
                    that._clickDrag(e,end,start);
                })
            },
            _setDragW : function(pos,x){
                var that = this;
                that.bar.width(Math.max(0,x));
                that.count.val(pos+that.min);
            },
            _initStyle : function(){
                var that = this;
                that.start.text(that.min);
                that.end.text(that.max);
            },
            _changeCount : function(min,max){
                var that = this,
                    num = that.count.val(),
                    maxMove =  that.drag[0].offsetWidth - that.btn[0].offsetWidth;
                num < min ? num =0 : num;
                num > max ? num = max : num;
                that.bar.width(Math.round(Math.max(0,(num-min))*(maxMove/(max-min))));
                that.btn.css("left",Math.round(Math.max(0,(num-min))*(maxMove/(max-min))));
            },
            _clickDrag : function(e,end,start){
                var that = this,
                    x = (e || window.event).clientX,
                    dragL = that.drag.offset().left,
                    maxMove = that.drag[0].offsetWidth - that.btn[0].offsetWidth,
                    to = Math.min(maxMove,Math.max(0,(x - dragL)));
                that.btn.css("left",to+'px');
                that._setDragW(Math.round(Math.max(0,to/maxMove)*(end-start)),to);
            }
        }
        return zlDragFun;
    })();
    $.fn.zlDrag = function(options){
        return this.each(function(){
            var me = $(this),
                instance = me.data("zlDrag");
            if(!instance){
                instance = new zlDrag(me,options);
                me.data("zlDrag",instance);
            }
            if($.type(options) === "string"){
                return instance[options]();
            }
        });
    };

    //设置插件相关配置参数
    $.fn.zlDrag.default = {
        min : 10,
        max : 100,
        selectors : {
            drag : '.drag',
            bar : '.bar',
            btn : '.drag-btn',
            start : '.start-count',
            end : '.end-count',
            count : '.drag_count'
        }
    }
})(jQuery)
